<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/** 
			 * 基础响应式对象,不执行嵌套对象的深度响应式转换
			 * @param {Object} data
			 */
			function reactive(data){
				if(typeof data =='object'){
					if(data instanceof Array){
						data.forEach((obj,index)=>{
							if(typeof obj == 'object'){
								data[index] = reactive(obj)
							}
						})
					}else{
						for(let key in data){
							if(typeof data[key]=='object'){
								data[key] = reactive(data[key])
							}
						}
					}
					return new Proxy(data,{
						get:function(data,key){
							if(key in data){
								return data[key]
							}else{
								console.warn('key is undefined')
							}
						},
						set:function(data,key,value){
							data[key] = value
							console.log('render...');
							return true
						}
					})
				}else{
					throw new Error('data must be an object')
				}
			}
			let state = reactive({a:1,b:{name:'hello',like:['ball','game'],age:20}})
			state.c=12
			state.b.age++
			console.log(state);
			state.b.age++
			console.log(state);
			state.b.age++
			state.b.like[0] = 'xxx'
			console.log(state);
		</script>
	</body>
</html>
